import React from 'react';
import {Link} from 'react-router';
import {observer} from 'mobx-react';
import Im from 'immutable';
import Pagination from 'rc-pagination';
import {Spin} from 'antd';

import Store from './store.js';
import './index.less';
import Datetime from 'react-datetime';

//component
import SetHelmet from 'components/widgets/SetHelmet';
import ReIcon from 'components/widgets/ReIcon';
import ReTextField from 'components/widgets/ReTextField';
import Empty from "../../widgets/Empty/Empty";
import ReSelectField from 'components/widgets/ReSelectField';

@observer
export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {};

    name = 'ExhibitionsManage';
    store = null;

    constructor(props, context) {

        super(props, context);

        this.name = props.name ? props.name : this.name;
        this.store = new Store({name: this.name});
        // this.state = {
        //     current:1,
        // }

        this.viewTypeList = [
            {value: 0, label: '无'},
            {value: 1, label: '低'},
            {value: 2, label: '中'},
            {value: 3, label: '高'},
        ];


    }

    componentWillMount() {
        this.store.will();
    }

    componentDidMount() {
        this.store.mount();
    }

    componentWillUnmount() {
        this.store.remove();
    }

    componentWillReact() {
        // console.log(arguments);
    }


    popMenuItemClick(e, item) {
        console.log('item', item)
        e.preventDefault();
        e.stopPropagation();
        item.func && (typeof(item.func) === 'function') && item.func();
    }

    render() {

        return (
            <div className="orin-s-exhibitionsmanage-root">
                <SetHelmet title='画展管理'/>
                <div className="header-wrapper">画展管理</div>
                <div className="fix-wrapper">
                    <div className="center-manage-wrapper">
                        <div className="search-wrapper">
                            <div className="line-wrapper line3">
                                <div className="time-input">
                                    <Datetime value={this.store.startTime}
                                              locale="zh-cn"
                                              dateFormat="YYYY-MM-DD"
                                              inputProps={{placeholder: '开始时间'}}
                                              onChange={(e) => this.store.startTimeChange(e)}/>
                                    {
                                        !!this.store.startTime &&
                                        <span className="close-right" onClick={() => this.store.clearStartTime()}>
                                            <ReIcon className='close-btn' icon="tubiao06"/>
                                        </span>
                                    }
                                </div>
                            </div>
                            <div className="line-wrapper line3">
                                <div className="time-input">
                                    <Datetime value={this.store.endTime}
                                              locale="zh-cn"
                                              dateFormat="YYYY-MM-DD"
                                              inputProps={{placeholder: '结束时间'}}
                                              onChange={(e) => this.store.endTimeChange(e)}/>
                                    {
                                        !!this.store.endTime &&
                                        <span className="close-right" onClick={() => this.store.clearEndTime()}>
                                            <ReIcon className='close-btn' icon="tubiao06"/>
                                        </span>
                                    }
                                </div>
                            </div>
                            <div className="btn" onClick={() => this.store.searchTime()}>搜索</div>
                            <div className="line-wrapper">
                                <ReTextField
                                    isLabel={false}
                                    type="text"
                                    className="work-input"
                                    notfullWidth={false}
                                    onChange={(e, v) => this.store.exhibitionNameChange(v)}
                                    errorText={'' ? 'error' : ''}
                                    searchIcon={true}
                                    searchHandler={() => this.store.search()}
                                    closeIcon={true}
                                    closeHandler={() => this.store.closeHandle()}
                                    value={this.store.keyWord}
                                    placeholder={'搜索画展名称、作者'}
                                    onKeyDown={(e) => this.store.nameInput(e)}/>
                            </div>
                        </div>
                        <div className="manage-wrapper">
                            <span className="manage-btn" onClick={() => {
                                this.store.downloadExcel()}}>导出Excel表格</span>
                        </div>
                    </div>
                </div>
                <div className="orin-s-exhibitionsplate-root">
                    <div className="content-new-wrapper">
                        <div className="content-header-title">
                            <div className="content-number title">
                            </div>
                            <div className="content-date title">
                                <span>日期</span>
                            </div>
                            <div className="content-name title">
                                <span>画展名称</span>
                            </div>
                            <div className="content-author title">
                                <span>作者</span>
                            </div>
                            <div className="content-artwork title">
                                <span>作品</span>
                            </div>
                            <div className="content-view title">
                                <span>浏览量</span>
                            </div>
                            <div className="content-like title">
                                <span>点赞量</span>
                            </div>
                            {/*<div className="content-income title">*/}
                            {/*<span>收益</span>*/}
                            {/*</div>*/}
                            <div className="content-data title">
                                <span>增加数据</span>
                            </div>
                            <div className="content-more-btn title">
                                <span>更多</span>
                            </div>
                        </div>
                        <div className="content">
                            {
                                this.store.exhibitionList.map((item, index) => {
                                    let _this = this;
                                    let popMenuOption = [{
                                        'name': '链接',
                                        'func': (e) => _this.store.urlClick(item),
                                    }, {
                                        'name': '排序',
                                        'func': (e) => _this.store.sortClick(item),
                                    }, {
                                        'name': '取消发布',
                                        'func': (e) => _this.store.cancelRelease(item),
                                    }
                                    ];
                                    return (
                                        <div key={index} className="users-wrapper-pc">
                                            <div className="user-item-wrapper">
                                                <div className="content-number">
                                                    <span
                                                        className="text">{(this.store.currentPage * 2 - 2) * 10 + (index + 1)}</span>
                                                </div>
                                                <div className="content-date">
                                                    <p className="text">
                                                        <span>{$$.utils.getFormatAllTime2(item.releaseTime, true)}</span>
                                                    </p>
                                                </div>
                                                <div className="content-name">
                                                    {
                                                        item.custom === 1 &&
                                                        <p className="tips">多展厅</p>
                                                    }
                                                    <p className="text">
                                                        <span>{item.name}</span>
                                                    </p>
                                                </div>
                                                <div className="content-author">
                                                    <p className="text">
                                                        <span>{item.artistName || ''}</span>
                                                    </p>
                                                </div>
                                                <div className="content-artwork">
                                                    <p className="text">
                                                        <span>{item.artworkCount}</span>
                                                    </p>
                                                </div>
                                                <div className="content-view">
                                                    <p className="text">
                                                        <span>{item.viewNumber}</span>
                                                    </p>
                                                </div>
                                                <div className="content-like">
                                                    <p className="text">
                                                        <span>{item.giveLike}</span>
                                                    </p>
                                                </div>
                                                {/*<div className="content-income">*/}
                                                {/*<p className="text">*/}
                                                {/*<span>*/}
                                                {/*{}*/}
                                                {/*</span>*/}
                                                {/*</p>*/}
                                                {/*</div>*/}
                                                <div className="content-data">
                                                    <div className="text">
                                                        <ReSelectField
                                                            type=""
                                                            className={this.store.viewId ? 'work-select l-index' : 'work-select'}
                                                            isOpen={false}
                                                            list={this.viewTypeList}
                                                            value={item.addViewLevel}
                                                            iconChoose={true}
                                                            // noBorder={true}
                                                            placeholder={$$.utils.changeViewLevel2Name(item.addViewLevel)}
                                                            onChange={(v) => this.store.dataTypeChange(v, item)}/>
                                                    </div>
                                                </div>
                                                <div className="content-more-btn">
                                                    {
                                                        popMenuOption.map((item, index) => {
                                                            return (
                                                                <div key={index} className="select-button"
                                                                     onClick={(e) => this.popMenuItemClick(e, item)}>
                                                                    <span className="btn-name">{item.name}</span>
                                                                </div>
                                                            )
                                                        })
                                                    }
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
                {
                    !this.store.firstRequest &&
                    <div className="manage-loading-wrapper">
                        <Spin spinning={!this.store.firstRequest} size="large" tip={$$.LN.IS_LOADING}/>
                    </div>
                }
                {
                    this.store.exhibitionList.length === 0 && this.store.firstRequest &&
                    <Empty tips={'暂无画展记录'}/>
                }
                {
                    this.store.exhibitionList.length > 0 &&
                    <div className="pagination-wrapper">
                        <div className="pagination-count">
                            总共{this.store.total}条数据，当前有{this.store.exhibitionList.length}条
                        </div>
                        <Pagination
                            onChange={(current) => this.store.paginationChange(current)}
                            defaultPageSize={$$.SEM.EXHIBITION_LIST_SIZE}
                            current={this.store.currentPage}
                            defaultCurrent={this.store.currentPage}
                            total={this.store.total}/>
                    </div>
                }
            </div>
        );
    }
}